<template>
    <div class="dingdan">
     <div class="top">饿了么</div>
     <div class="btns">
        <div  v-for="(item,index) in btns" :key="index">{{item}}</div>
     </div>
     <div class="center">
        <div class="item">
           <div class="itemTop">
            <img src="https://img0.baidu.com/it/u=946314603,465355950&fm=253&fmt=auto&app=138&f=JPEG?w=461&h=346" alt="">
           <span>纯手工饺子(凤城九路店)</span>
           <span>已送达</span>
           </div>
           <div class="itemCenter">
            <img src="https://img0.baidu.com/it/u=3388835403,2763123290&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=432" alt="">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ee795cb9401ca80121416885f394.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672889245&t=01e4f7f0c8f41b68016804a554a3a1f8" alt="">
            <span>￥17.8</span>
           </div>
           <button>再来一单</button>
        </div>
     </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'foot',
    data(){
      return{
        btns:['全部','待消费','待评价','退款'],
        list:[
         
        ]
      }
      },
      methods:{
     
      },
    props: {
      msg: String
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .top{
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }
  .btns{
    display: flex;
    padding: 5px 20px;
  }
  .btns div{
    margin-right: 20px;
  }
  .center{
    padding: 5px 20px;
    height: 600px;
    background-color: #F5F5F5;
  }
  .item .itemTop img{
    height: 30px;
    width: 30px;
    border-radius: 20%;
    vertical-align:middle;
  }
 
  .item button{
   position: absolute;
   right: 1%;
   bottom: 4%;
    color: red;
    border: red solid 1px ;
    background-color: white;
    width: 80px;
    height: 30px;
    border-radius: 20px;
  }
  .item{
    height: 150px;
    position: relative;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
  }
  .item .itemTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item .itemCenter{
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .item  .itemCenter span{
    flex: 1;
    text-align: end;
  }
  .item .itemCenter img{
    width: 60px;
    height: 60px;
    margin-right: 5px;
    border-radius: 10px;
    vertical-align:middle;
  }
  .item div span:nth-of-type(2){
    color: #ccc;
    font-size: 12px;
    flex: 1;
    text-align: end;
  }
  </style>
  